{% extends "base.html" %}

{% block title %}价格预测 - 惠农平台{% endblock %}

{% block content %}
<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <h3><i class="fas fa-chart-area me-2"></i>不同类型农产品价格未来预测</h3>
            </div>
            <div class="card-body">
                <!-- 筛选条件 -->
                <div class="row mb-4">
                    <div class="col-md-4">
                        <label for="predictionTypeSelect" class="form-label">产品类型</label>
                        <select class="form-select" id="predictionTypeSelect">
                            <option value="蔬菜" selected>蔬菜</option>
                            <option value="水果">水果</option>
                            <option value="粮食">粮食</option>
                            <option value="油料">油料</option>
                        </select>
                    </div>
                    <div class="col-md-4">
                        <label for="predictionDaysSelect" class="form-label">预测天数</label>
                        <select class="form-select" id="predictionDaysSelect">
                            <option value="7" selected>7天</option>
                            <option value="15">15天</option>
                            <option value="30">30天</option>
                            <option value="60">60天</option>
                        </select>
                    </div>
                    <div class="col-md-4 d-flex align-items-end">
                        <button type="button" class="btn btn-primary" onclick="initPricePrediction()">
                            <i class="fas fa-refresh me-1"></i>刷新预测
                        </button>
                    </div>
                </div>

                <!-- 图表容器 -->
                <div class="chart-container">
                    <div id="pricePredictionChart" style="width: 100%; height: 500px;"></div>
                </div>

                <!-- 预测结果摘要 -->
                <div class="row mt-4">
                    <div class="col-md-6">
                        <div class="card">
                            <div class="card-header">
                                <h5><i class="fas fa-chart-line me-2"></i>预测趋势分析</h5>
                            </div>
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-6">
                                        <h6 class="text-success">预测趋势</h6>
                                        <p class="text-muted">上升趋势</p>
                                    </div>
                                    <div class="col-6">
                                        <h6 class="text-primary">置信度</h6>
                                        <p class="text-muted">85%</p>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-6">
                                        <h6 class="text-warning">预测最高价</h6>
                                        <p class="text-muted">¥5.2</p>
                                    </div>
                                    <div class="col-6">
                                        <h6 class="text-info">预测最低价</h6>
                                        <p class="text-muted">¥4.6</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="card">
                            <div class="card-header">
                                <h5><i class="fas fa-lightbulb me-2"></i>投资建议</h5>
                            </div>
                            <div class="card-body">
                                <div class="alert alert-success">
                                    <h6><i class="fas fa-arrow-up me-2"></i>建议操作</h6>
                                    <p class="mb-0">根据预测分析，建议适当增加库存，价格呈上升趋势。</p>
                                </div>
                                <div class="alert alert-warning">
                                    <h6><i class="fas fa-exclamation-triangle me-2"></i>风险提示</h6>
                                    <p class="mb-0">预测结果仅供参考，实际价格可能受多种因素影响。</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 说明信息 -->
                <div class="mt-4">
                    <div class="alert alert-info">
                        <h5><i class="fas fa-info-circle me-2"></i>预测说明</h5>
                        <ul class="mb-0">
                            <li>本图表展示了农产品价格的历史数据和未来预测</li>
                            <li>蓝色实线表示历史价格数据，橙色虚线表示预测价格</li>
                            <li>预测基于历史数据趋势和季节性分析</li>
                            <li>可以选择不同的产品类型和预测时间范围</li>
                            <li>预测结果仅供参考，实际价格可能受市场因素影响</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %} 